<template>
    <el-row class="NavMenu">
        <!-- 淘方案 Logo -->
        <el-col :span="2"><div class="Brand" @click="routerTo('/')">淘方案</div></el-col>
        <el-col :span="10">
            <el-menu :default-active="activeIndex" style="border-width:0px;" class="el-menu-demoe" mode="horizontal"
                @select="handleSelect" background-color="#303643" text-color="#fff" active-text-color="#ffd04b" :router="true">
                
                <!-- 首页 -->
                <el-menu-item index="1" route="/"><i class="el-icon-location"></i><span>首页</span></el-menu-item>

                <!-- 全部方案 -->
                <!-- <el-menu-item index="2" v-on:click="routerToClass()">全部方案</el-menu-item> -->
                <el-menu-item index="2" :route="{name:'class',params: {classId: 'all', class: '全部分类', sort: '0', level: 0, page: 1}}">全部方案</el-menu-item>

                <!-- 收藏中心 -->
                <el-menu-item v-if="$store.state.isLogin" index="3" :route="{name:'users',params: {activeName:'collection'}}">收藏中心</el-menu-item>

                <!-- 用户中心 -->
                <el-submenu v-if="$store.state.isLogin" index="4">
                    <template id="navUser" slot="title">用户中心</template>
                    <el-menu-item index="4-1" :route="{name:'users',params: {activeName:'usershome'}}">个人主页</el-menu-item>
                    <el-menu-item index="4-2" :route="{name:'users',params: {activeName:'message'}}">消息中心</el-menu-item>
                    <el-menu-item index="4-3" :route="{name:'users',params: {activeName:'updatePassword'}}">修改密码</el-menu-item>
                </el-submenu>

                <!-- 客服中心 -->
                <el-menu-item index="5" :route="'/service'">客服中心</el-menu-item>
            </el-menu>
        </el-col>

        <!-- 搜索框 -->
        <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="keyword" @keyup.enter.native="onSubmit('search',{classId: 'all', keyword: keyword,page: 1})">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </el-col>

        <!-- 用户登录选项及下拉菜单 -->
        <el-col :span="6">
            <div v-if="$store.state.isLogin">
                <el-dropdown @command="handleCommand" class="dropdown">
                    <span class="el-dropdown-link">{{$store.state.name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item>我的主页</el-dropdown-item>
                        <el-dropdown-item>我的收藏</el-dropdown-item>
                        <el-dropdown-item>消息中心</el-dropdown-item> -->
                        <el-dropdown-item command="logout">注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <!-- 消息提醒 -->
                <button class="messageButton" @click="onSubmit('users',{activeName : 'message'})">
                    <el-badge is-dot class="item"><i class="el-icon-message"></i><span style="margin: 2px;">消息</span></el-badge>
                </button>
            </div>

            <!-- 注册 & 登录 -->
            <div v-else>
                <button id="login" class="button" @click="routerTo('/users/usershome/login')"><span>LOGIN</span></button>
                <button id="signup" class="button" @click="routerTo('/users/usershome/signup')"><span>SIGN UP</span></button>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "NavMenu",
        data() {
            return {
                activeIndex: "1",
                keyword: '',
            };
        },
        mounted() {
            this.$store.state.isLogin = !this.$store.state.isLogin;
            this.$store.state.isLogin = !this.$store.state.isLogin;
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            /**
             * 路由跳转带参数
             **/
            onSubmit(name, params) {
                this.$router.push({
                    name: name,
                    params: params
                });
                // console.log(this.keyword);
            },
            /**
             * 路由跳转
             */
            routerTo(direc) {
                this.$router.push({
                    path: direc
                });
            },
            // routerToClass(){
            //   this.$router.push({name:'class',params: {classId: 'all', class: '全部分类', sort: '0', level: 0, page: 1}});
            // }
            /**
             * 注销确认
             * 并将用户登录信息清除
             */
            open2() {
                this.$confirm('此操作注销账户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.commit('setLogoutInfo');
                    this.$message({
                        type: 'success',
                        message: '注销成功!'
                    });
                    this.$router.push('/');
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消注销'
                    });
                });
            },
            handleCommand() {
                this.open2();
            }
        }
    };
</script>

<style scoped>
    .NavMenu {
        background-color: #303643;
        line-height: 60px;
    }

    .Brand {
        width: 100px;
        color: #ff3860;
        text-align: center;
    }

    .dropdown {
        float: right;
        line-height: 60px;
        color: #fff;
        padding-left: 30px;
        padding-right: 30px;
    }

    #signup {
        display: inline-block;
        border-radius: 4px;
        background-color: #ff3860;
        border: none;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
        width: 120px;
        height: 40px;
        margin: 10px;
        transition: all 0.5s;
        cursor: pointer;
    }

    #login {
        display: inline-block;
        border-radius: 4px;
        background-color: #38ffac;
        border: none;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        padding-left: 5px;
        padding-right: 5px;
        margin: 10px;
        width: 100px;
        height: 40px;
        transition: all 0.5s;
        cursor: pointer;
    }

    .button {
        float: right;
        vertical-align: middle;
        line-height: normal;
    }

    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    .button span:after {
        content: "»";
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button:hover span {
        padding-right: 25px;
    }

    .button:hover span:after {
        opacity: 1;
        right: 0;
    }

    .messageButton {
        float: right;
        line-height: 56px;
        color: #fff;
        background-color: #303643;
        border: none;
        font-size: 14px;
        padding-left: 30px;
        padding-right: 30px;
        outline: none;
    }
</style>

<!--<style>
    .el-menu {
        height: 70px;
    }
    
    .el-menu-item {
        height: 70px;
    }
    
    .el-submenu {
        height: 70px;
    }
    
    #user {
        height: 70px;
    }
</style>-->